<template>
  <div class="box">
    <header>
      <div>
        <van-nav-bar
          class="back"
          left-text="搜索"
          left-arrow
          @click-left="onClickLeft"
        />
      </div>
    </header>
    <section>
      <van-search
        v-model="value"
        show-action
        label="地址"
        placeholder="请输入搜索关键词"
        shape="round"
        @search="onSearch"
      >
        <template #action>
          <div @click="onSearch" class="ser">搜索</div>
        </template>
      </van-search>
    </section>
    <main>
      <section class="order">
        <button>综合排序👇</button>
        <button @click="aesOrder">距离最近</button>
        <button @click="desOrder">销售最高</button>
        <button>筛选</button>
      </section>
      <section class="sole">
        <button>年货节热卖</button>
        <button>津贴联盟</button>
      </section>
      <div class="contain">
        <section v-for="(item, index) in goodslist" :key="index">
          <div class="left">
            <nav>
              <img :src="item.picUrl" />
            </nav>
          </div>
          <div class="right">
            <h4>{{ item.name }}</h4>
            <p class="two">
              <span style="color: orange; margin-right: 5px"
                >★{{ item.wmPoiScore / 10 }} &nbsp;<span>{{
                  item.monthSalesTip
                }}</span></span
              >
              <span>{{ item.deliveryTimeTip }}&emsp;{{ item.distance }}</span>
            </p>
            <div class="zhekou">
              <!-- <p>{{item.discounts2[index].info}}&nbsp;{{item.discounts2}}</p> -->
              <span v-for="(a, b) in item.discounts2" :key="b"
                >{{ a.info }}&nbsp;</span
              >
            </div>
            <div class="image">
              <section v-for="(c,d) in item.discounts2" :key="d">
                <img :src="c.iconUrl" >
                <!-- {{c}} -->
              </section>
            </div>
          </div>
        </section>
      </div>
    </main>
  </div>
</template>
  
<script>
import { shop_search } from "../../api/index2";

export default {
  name: "Ser",
  data() {
    return {
      value: this.$route.query.zi,
      text: "",
      list: [],
      goodslist: [],
    };
  },
  methods: {
    onClickLeft() {
      this.$router.back();
    },
    onSearch() {
      this.$router.push("/Ser/SearchShop");
      localStorage.setItem("this.keyword", this.keyword);
      this.innerHtml = "";
    },
    aesOrder() {
      this.goodslist.sort((a, b) => parseInt(a.distance) - parseInt(b.distance));
    },
    desOrder() {
      this.goodslist.sort((a, b) => {
        console.log(typeof b.monthSalesTip.slice(2));
        return b.monthSalesTip.slice(2) - a.monthSalesTip.slice(2);
      });
    },
  },
  created() {
    // console.log(this.$route.query.zi);
    shop_search({ searchkey: this.$route.query.zi }).then((res) => {
      if (res.data.code == 200) {
        // alert('ok')
        // console.log("res.data.list", res.data.list);
        this.goodslist = res.data.list;
        console.log(res.data.list);
      }
    });
  },
};
</script>
  
  <style lang="css" scoped>
.box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #fff;
  padding: 0 15px;
  box-sizing: border-box;
}
header {
  min-height: 3.5rem;
  display: flex;
  justify-content: space-around;
  flex-direction: column;
  flex-wrap: wrap;
}
header .back {
  text-align: left;
  font-size: 14px;
  color: rgb(52, 184, 236);
}
.ser {
  color: rgb(11, 96, 223);
}
main .order {
  display: flex;
}
main .order button {
  background-color: #fff;
}
main button:hover {
  color: rgb(0, 136, 247);
}
main button {
  margin-right: 15px;
  margin-top: 10px;
  border: none;
}

main .contain {
  width: 100%;
}
main .contain section {
  width: 100%;
  display: flex;
  height: 200px;
  margin-top: 15px;
}
main .contain .left {
  width: 18%;
  /* border: 1px solid black; */
  margin-right: 7px;
}
main .contain .left nav {
  width: 100%;
  height: 55px;
  line-height: 100px;
  border-radius: 5px;
}
main .contain .left img {
  width: 100%;
  border-radius: 5px;
  height: 100%;
}
main .contain .right {
  /* border: 1px solid black; */
  flex: 1;
}
main .contain .right .two {
  display: flex;
  justify-content: space-between;
  color: gray;
  font-size: 14px;
  margin-top: 5px;
}
.zhekou {
  color: red;
  font-size: 12px;
  margin-top: 5px;
}
.zhekou span {
  border: 1px solid gray;
  margin-right: 3px;
  margin-top: px;
  line-height: 20px;
}
.image{
  width: 100%;
  border:1px solid pink;
  height: 95px;
  margin-top: 10px;
  /* display: flex;
  justify-content: space-between; */
}
/* .image section{
  width: 33%;
  height: 100%;
}
.image section img{
  width: 100%;
} */
</style>